<template>
  <view class="container">
    <view class="timer-display">
      <text class="time">{{ formatTime }}</text>
      <text class="status">{{ timerStatus }}</text>
    </view>

    <view class="control-panel">
      <button 
        class="control-btn" 
        :class="{'start-btn': !isRunning, 'stop-btn': isRunning}"
        @click="toggleTimer"
      >
        {{ isRunning ? '停止' : '开始' }}
      </button>
      <button 
        class="control-btn reset-btn" 
        @click="resetTimer"
      >
        重置
      </button>
    </view>

    <view class="settings-panel">
      <view class="setting-item">
        <text>工作时长(分钟)</text>
        <picker 
          :value="workTimeIndex" 
          :range="timeOptions" 
          @change="onWorkTimeChange"
        >
          <view class="picker-value">
            {{ timeOptions[workTimeIndex] }}
          </view>
        </picker>
      </view>
      
      <view class="setting-item">
        <text>休息时长(分钟)</text>
        <picker 
          :value="restTimeIndex" 
          :range="timeOptions" 
          @change="onRestTimeChange"
        >
          <view class="picker-value">
            {{ timeOptions[restTimeIndex] }}
          </view>
        </picker>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeOptions: ['15', '25', '30', '45', '60'],
      workTimeIndex: 3, // 默认45分钟
      restTimeIndex: 0, // 默认15分钟
      remainingTime: 45 * 60, // 默认工作时间(秒)
      isRunning: false,
      isWorkTime: true,
      timer: null
    }
  },
  computed: {
    formatTime() {
      const minutes = Math.floor(this.remainingTime / 60)
      const seconds = this.remainingTime % 60
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    },
    timerStatus() {
      return this.isWorkTime ? '工作中...' : '休息时间'
    }
  },
  methods: {
    toggleTimer() {
      if (this.isRunning) {
        this.stopTimer()
      } else {
        this.startTimer()
      }
    },
    startTimer() {
      this.isRunning = true
      this.timer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--
        } else {
          this.timeUp()
        }
      }, 1000)
    },
    stopTimer() {
      this.isRunning = false
      clearInterval(this.timer)
    },
    resetTimer() {
      this.stopTimer()
      this.isWorkTime = true
      this.remainingTime = parseInt(this.timeOptions[this.workTimeIndex]) * 60
    },
    timeUp() {
      this.stopTimer()
      this.isWorkTime = !this.isWorkTime
      
      // 播放提示音
      uni.vibrateShort()
      
      // 显示通知
      uni.showModal({
        title: this.isWorkTime ? '休息结束' : '工作结束',
        content: this.isWorkTime ? '开始新的工作吧!' : '该休息一下了!',
        showCancel: false,
        success: () => {
          // 切换到下一个计时周期
          this.remainingTime = this.isWorkTime 
            ? parseInt(this.timeOptions[this.workTimeIndex]) * 60
            : parseInt(this.timeOptions[this.restTimeIndex]) * 60
          this.startTimer()
        }
      })
    },
    onWorkTimeChange(e) {
      this.workTimeIndex = e.detail.value
      if (!this.isRunning && this.isWorkTime) {
        this.remainingTime = parseInt(this.timeOptions[this.workTimeIndex]) * 60
      }
    },
    onRestTimeChange(e) {
      this.restTimeIndex = e.detail.value
      if (!this.isRunning && !this.isWorkTime) {
        this.remainingTime = parseInt(this.timeOptions[this.restTimeIndex]) * 60
      }
    }
  },
  onUnload() {
    // 页面卸载时清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
}

.timer-display {
  text-align: center;
  margin: 60rpx 0;
}

.time {
  font-size: 80rpx;
  font-weight: bold;
  color: #333;
}

.status {
  font-size: 32rpx;
  color: #666;
  margin-top: 20rpx;
  display: block;
}

.control-panel {
  display: flex;
  justify-content: center;
  margin: 40rpx 0;
}

.control-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin: 0 20rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #fff;
}

.start-btn {
  background-color: #3cc51f;
}

.stop-btn {
  background-color: #e64340;
}

.reset-btn {
  background-color: #999;
}

.settings-panel {
  margin-top: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.setting-item:last-child {
  border-bottom: none;
}

.picker-value {
  color: #3cc51f;
}
</style>